<template>
<div class="content" style="position: relative;">
  <div class="all-content">
  <!--新增/编辑页面start-->
  <p class="toptitle">{{titleString}}</p>
  <section class="content" style="position: relative; " v-if="!readonly">
     <el-form ref="singleSKU" :rules="rules"  :model="singleSKU" label-width="180px" >
        <el-collapse v-model="activeNames" @change="handleChanges">
          <el-collapse-item title="基本信息" name="1"  class="option">
          <div class="">
          <el-form-item label="商品SKU："  prop="sku">
              <el-input placeholder="长度不超过50位，只能字母、数字、-、_"   v-model="singleSKU.sku"  style="width:500px"></el-input>
          </el-form-item>
           <el-form-item label="中文名称："  prop="goodsCn">
              <el-input placeholder="长度不超过255位"   v-model="singleSKU.goodsCn"  style="width:500px"></el-input>
          </el-form-item>
          <el-form-item label="英文名称："  prop="goodsEn">
              <el-input placeholder="长度不超过255位"  v-model="singleSKU.goodsEn" style="width:500px"></el-input>
          </el-form-item>
          <el-form-item label="商品分类："  style="width:615px">
               <div class="" v-if="allCategoryAnalysis.length != 0" style="position: relative">
               <el-input
                  placeholder="请选择商品分类"
                  v-model="formData.inspectObjectName"
                  icon="caret-bottom"
                  suffix-icon="el-icon-arrow-down"
                  class="linehe"
                   style="width:500px"
                  @click.native="isShowSelectFn">
                </el-input>
                <el-tree v-if="isShowSelect"
                          empty-text="暂无数据"
                          :expand-on-click-node="false"
                          :data="allCategoryAnalysis"
                          :props="defaultProps"
                          default-expand-all
                          @node-click="handleNodeClick"
                          class="objectTree"
                           style="width:500px">
                </el-tree>
                  <router-link v-if="!readonly && allCategoryAnalysis.length != 0"
                       to="/v1/goods/category/getList" class="addProductCate">添加商品分类
                  </router-link>
               </div>
                <div class="" v-else>
                  <label class="payment">
                    <i class="fa fa-warning"></i>
                    您当前还未添加商品分类
                    <router-link to="/v1/goods/category/getList" class="text-red text-bold">【立即添加】</router-link>
                  </label>
                </div>
          </el-form-item>
          <el-form-item label="商品图片：">
                <div class="border-default">
                  <div>
                    <input @change="choosePic($event)" type="file" style="display: none" id="file-upload"
                          accept="image/jpg,image/jpeg,image/png,image/gif">
                    <a @click="fileClick()" v-if="!readonly" class="btn upimgbut">上传图片</a>
                     <p class="uplaodImgTip">只能上传JPG / PNG文件，且不超过500KB</p>
                  </div>
                  <div class="maxImg">
                    <img v-if="show" src="@/assets/addPic.png" alt="">
                    <img :src="singleSKU.goodsPic" class="pic" v-else >
                    <i  class="delPic el-icon-close" v-if="!show && !readonly"   src="@/assets/delete.png" alt=""
                        @click="deletePicComfirm"></i>
                  </div>

                </div>
          </el-form-item>
           <el-form-item label="品牌：">
                <div class="" v-if="brandSelectList.length != 0">
                    <el-select  v-model="singleSKU.brandId"  style="width:500px" placeholder="请选择商品品牌">
                      <el-option v-for="brandSelectListItem in brandSelectList"
                        :key="brandSelectListItem.id"
                        :label="brandSelectListItem.brandName"
                        :value="brandSelectListItem.id" >
                      </el-option>
                     </el-select>
                  <router-link v-if="!readonly && brandSelectList.length != 0" to="/v1/goods/brand/getList"
                                class="addProductCate">添加商品品牌
                  </router-link>
                </div>
          </el-form-item>
           <el-form-item label="建议零售价：">
                <el-input placeholder="保留2位小数"  v-model="singleSKU.retailPrice"  style="width:500px"></el-input>
                <span class="input-group-addon">USD</span>
          </el-form-item>
       </div>
    </el-collapse-item>


        <el-collapse-item title="申报信息" name="2"  class="option">
      <div>
          <el-form-item label="申报品名（中文）："  prop="declareNameCn">
              <el-input placeholder="长度不超过255位"  v-model="singleSKU.declareNameCn"  style="width:500px"></el-input>
          </el-form-item>
           <el-form-item label="申报品名（英文）："  prop="declareNameEn">
              <el-input placeholder="长度不超过255位"    v-model="singleSKU.declareNameEn"   style="width:500px"></el-input>
          </el-form-item>
          <el-form-item label="申报价格：" >
              <el-input placeholder="保留2位小数"   v-model="singleSKU.declarePrice"   style="width:500px"></el-input>
                <span class="input-group-addon">USD</span>
          </el-form-item>
           <el-form-item label="申报重量：">
                <el-input placeholder="保留2位小数"  v-model="singleSKU.declareWeight"    style="width:500px"></el-input>
                <span class="input-group-addon">kg</span>
          </el-form-item>
           <el-form-item label="申报编码："   prop="declareCode">
                <el-input placeholder="海关标准的参数代码"  v-model="singleSKU.declareCode" @change="declareCodeRe"  style="width:500px"></el-input>
          </el-form-item>
           <el-form-item label="规格："   prop="gmodel">
                <el-input placeholder="满足海关归类、审价以及监管的要求标准"  v-model="singleSKU.gmodel"   style="width:500px"></el-input>
           </el-form-item>
           <el-form-item label="海关商品备案编号：" prop="recordNo">
                <el-input placeholder="不备案的商品填写18个0"  v-model="singleSKU.recordNo"   style="width:500px"></el-input>
          </el-form-item>
           <el-form-item label="条形码："  prop="barCode"  >
                <el-input  v-model="singleSKU.barCode" placeholder="一般由前缀部分、制造厂商代码、商品代码和校验码组成"   style="width:500px"></el-input>
          </el-form-item>
           <el-form-item label="危险品运输：">
               <el-radio-group  v-model="singleSKU.transportType">
                  <el-radio   name="hazardous"  id="checkbox" label="">无</el-radio>
                  <el-radio id="checkbox1"  name="hazardous" :label="1">液体</el-radio>
                  <el-radio id="checkbox2" name="hazardous"  :label="2">粉末</el-radio>
                  <el-radio id="checkbox3" name="hazardous"  :label="3">带电</el-radio>
               </el-radio-group>
          </el-form-item>

        </div>
         </el-collapse-item>


      <el-collapse-item title="重要信息" name="3" class="option">
      <div >
          <el-form-item label="第一计量单位："  prop="meteringFirstSelect">
             <el-select class="linehe" style="width:500px"
                v-model="meteringFirstSelect" filterable placeholder="请选择计量单位">
                <el-option
                  v-for="item in meteringFirst"
                  :key="item.code"
                  :label="item.codeValue"
                  :value="item.code">
                </el-option>
              </el-select>
          </el-form-item>
           <el-form-item label="第二计量单位：" >
             <el-select class="linehe" style="width:500px"
                                     v-model="meteringSecondSelect" filterable placeholder="请选择计量单位">
                  <el-option
                    v-for="item in meteringFirst"
                    :key="item.code"
                    :label="item.codeValue"
                    :value="item.code">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="尺寸：">
                <el-input placeholder="长"   v-model="singleSKU.length"   style="width:164px;margin-bottom: 5px;"></el-input>
                 <span class="input-group-addon" style="left:92px;">cm</span>
                 <el-input placeholder="宽"   v-model="singleSKU.wide"  style="width:164px;margin-bottom: 5px;"></el-input>
                  <span class="input-group-addon" style="left:260px;">cm</span>
                 <el-input placeholder="高"   v-model="singleSKU.height"  style="width:164px"></el-input>
                <span class="input-group-addon">cm</span>
          </el-form-item>
           <el-form-item label="重量：">
                <el-input placeholder="保留2位小数"   v-model="singleSKU.weight"   style="width:500px"></el-input>
                <span class="input-group-addon">kg</span>
          </el-form-item>
        </div>
          </el-collapse-item>
          </el-collapse>
        <div style="text-align: center;width:100%;margin:50px 0">
            <el-button type="primary"  @click="submit()">保存商品</el-button>
            <el-button @click="goBanck()" >关闭</el-button>
          </div>


    <div class="treeSelect" v-if="isShowSelect" @click.self.prevent="isShowSelect = false"></div>
    </el-form>
  </section>
  <!--新增/编辑页面end-->


  <!--详情页面start-->
  <section class="content" style="position: relative;" v-if="readonly">
      <el-form ref="singleSKU" :rules="rules"  :model="singleSKU" label-width="180px" >
      	 <el-collapse v-model="activeNames" @change="handleChanges">
          <el-collapse-item title="基本信息" name="1"  class="option">
          <div class="">
            <div class="base-info">
              <div class="modelA">
                  <el-form-item label="商品图片：">
                      <div class="maxImg" style="border:none">
                        <img  class="pic"  :src="singleSKU.goodsPic" v-if="singleSKU.goodsPic" >
                        <img  class="pic" v-else src="@/assets/noPic.png" alt="">
                      </div>
                  </el-form-item>
              </div>
              <div class="modelB">
                  <el-form-item label="商品SKU：">
                    {{singleSKU.sku}}
                  </el-form-item>
                  <el-form-item label="中文名称：">
                    {{singleSKU.goodsCn}}
                  </el-form-item>
                  <el-form-item label="英文名称：">
                    {{singleSKU.goodsEn}}
                  </el-form-item>
                  <el-form-item label="商品分类：" >
                    {{formData.inspectObjectName}}
                  </el-form-item>
                  <el-form-item label="品牌：">
                    {{mybrandName}}
                  </el-form-item>
                  <el-form-item label="建议零售价：">
                    {{singleSKU.retailPrice}}
                  </el-form-item>
              </div>
              </div>
      			</div>
   </el-collapse-item >

		 <el-collapse-item title="申报信息" name="2"  class="option">
		 	<div>
         <div class="module clear-fix">
            <el-form-item label="申报品名（中文）：" >
              {{singleSKU.declareNameCn}}
             </el-form-item>
            <el-form-item label="申报品名（英文）：" >
               {{singleSKU.declareNameEn}}
            </el-form-item>
            <el-form-item label="申报价格：" >
              {{singleSKU.declarePrice}}
            </el-form-item>
            <el-form-item label="申报重量：">
              {{singleSKU.declareWeight}}kg
            </el-form-item>
            <el-form-item label="申报编码：" >
               {{singleSKU.declareCode}}
           </el-form-item>
            <el-form-item label="规格："   >
              {{singleSKU.gmodel}}
            </el-form-item>
            <el-form-item label="海关商品备案编号：">
              {{singleSKU.recordNo}}
            </el-form-item>
            <el-form-item label="条形码："  >
               {{singleSKU.barCode}}
            </el-form-item>
            <el-form-item label="危险品运输：">
              {{mytransportTypeName}}
            </el-form-item>
        </div>
     </div>
		 </el-collapse-item>


      <el-collapse-item title="重要信息" name="3" class="option">
      	<div>
          <div class="module  clear-fix">
              <el-form-item label="第一计量单位：">
                 <select class="linehe selectDiv"   disabled
                v-model="meteringFirstSelect" filterable>
                <option
                  v-for="item in meteringFirst"
                  :key="item.code"
                  :label="item.codeValue"
                  :value="item.code">{{item.codeValue}}
                </option>
                 </select>
              </el-form-item>
              <el-form-item label="第二计量单位：" >
                  <select class="linehe selectDiv"  disabled
                       v-model="meteringSecondSelect" filterable>
                  <option
                    v-for="item in meteringFirst"
                    :key="item.code"
                    :label="item.codeValue"
                    :value="item.code">{{item.codeValue}}
                  </option>
              </select>
              </el-form-item>
              <el-form-item ></el-form-item>
              <el-form-item label="尺寸：">
               {{singleSKU.length}}cm   * {{singleSKU.wide}}cm   * {{singleSKU.height}}cm
              </el-form-item>
              <el-form-item label="重量：">
                {{singleSKU.weight}}kg
              </el-form-item>
            </div>
          </div>

         </el-collapse-item>
          </el-collapse>
         <div style="text-align: center;width:100%;margin:20px 0">
            <el-button @click="goBanck()" >关闭</el-button>
          </div>
           </el-form>
    </section>
<!--详情页面end-->
  </div>
</div>
</template>

<script>
  import baseURL from '@/js/common/baseURL'
  import axios from 'axios'
  import instance from "../../../api";
  import dropdown from '@/pages/product/CommodityManagement/dropdown'

  export default {
    name: "singleSKU",
    components: {
      dropdown
    },
    data() {
      return {
      	titleString :"编辑商品",
        activeNames: ['1','2','3'],
        itemlist: [],
        imgList: [],
        placeholder: '',
        nodatatext: '',
        size: 0,
        errorShow: false,//错误显示
        errorMsg: '',//错误信息
        errorTitle: '',//错误提示标题
        errorClass: false,//错误样式
        formVerify: {
          skuError: '',
          goodsCnError: '',
          goodsEnError: '',
          declareNameCnError: '',
          declareNameEnError: '',
          declareCodeError: '',
          retailPriceError: '',
          declarePriceError: '',
          declareWeightError: '',
          lengthError: '',
          wideError: '',
          heightError: '',
          weightError: ''
        },
        formVerifyBoolean: {
          sku: false,
          goodsCn: false,
          goodsEn: false,
          declareNameCn: false,
          declareNameEn: false,
          declareCode: false,
          retailPrice: false,
          declarePrice: false,
          declareWeight: false,
          length: false,
          wide: false,
          height: false,
          weight: false
        },
        forEachIndex: 0,//递归下标
        productClassifyMap: new Map,//获取子叶商品分类
        productSelect: [],//解析Map数据
        singleSKU: {
          sku:'',
          goodsCn:'',
          goodsEn:'',
          declareNameCn:'',
          declareNameEn:'',
          retailPrice:'',
          declareNameCn:'',
          declareNameEn:'',
          declarePrice:'',
          declareWeight:'',
          declareCode:'',
          length:'',
          wide:'',
          height:'',
          weight:'',
          meteringFirstName:'',
          meteringSecondName:'',
          goodsPic: '',
          goodsCn: '',
          brandId: '',
          categoryId: '',
          transportType: "",
          //v2 新增字段
          gmodel:'',
          recordNo:'',
          barCode:''
        },//form表单
        brandSelectList: [],//商品品名
        flag: true,
        show: true,
        singleData: [],//获取单个传参数据
        readonly: false,//显示只读

        allCategoryAnalysis: [],//商品分类
        allCategory: [],
        classificationList: [],
        searcBarCode: '',
        meteringFirst: [],//第一计量单位
        meteringFirstSelect: '',
        meteringSecondSelect: '',
        formData: {
          // 传给后台的id
          inspectObject: "",
          // 输入框显示的
          inspectObjectName: ""
        },
        // 是否显示巡检对象的树状选择器
        isShowSelect: false,
        // 巡检对象的选项数据
        inspectionObjectOptions: [],
        // 巡检对象的选项的配置参数
        defaultProps: {
          id: "categoryId",
          label: 'categoryName',
          children: 'children'
        },
        allMenu: [],
        //v2
         rules: {
            sku: [
              { required: true, message: '请输入商品SKU', trigger: 'blur' },
              { min: 1, max:50, message:' 长度不超过50', trigger: 'blur' }
            ],
            goodsCn:[
               { required: true, message: '请输入中文名称', trigger: 'blur' },
               { min: 1, max:255, message:' 长度不超过255', trigger: 'blur' }
            ],
            goodsEn:[
               { required: true, message: '请输入英文名称', trigger: 'blur' },
               { min: 1, max:255, message:' 长度不超过255', trigger: 'blur' }
            ],
            declareNameCn:[
               { required: true, message: '请输入申报品名（中文）', trigger: 'blur' },
               { min: 1, max:255, message:' 长度不超过255', trigger: 'blur' }
            ],
            declareNameEn:[
               { required: true, message: '请输入申报品名（英文）', trigger: 'blur' },
               { min: 1, max:255, message:' 长度不超过255', trigger: 'blur' }
            ],
            declareCode:[
               { required: true, message: '请输入申报编码', trigger: 'blur' },
               { min: 1, max:13, message:' 长度不超过13', trigger: 'blur' }
            ],
            gmodel:[
               { required: true, message: '请输入规格', trigger: 'blur' },
            ],
            meteringFirstSelect:[
               { required: true, message: '请选择第一计量单位', trigger: 'blur'}
            ]
        },
        mybrandName:"",
        mytransportTypeName:""
      }
    },
    methods: {
       handleChanges(val) {
        console.log(val);
      },
      isShowSelectFn: function () {
        if (!this.readonly) {
          this.isShowSelect = !this.isShowSelect;
        }
      },
      handleNodeClick(data, Node) {
        // 如果是顶级父节点
        console.log("顶级父节点", Node)
        this.formData.inspectObjectName = data.categoryName;
        this.singleSKU.categoryId = data.categoryId;
        // 关闭选择器
        this.isShowSelect = false;
      },
      //图片上传
      fileClick: function () {
        if (this.singleSKU.sku) {
          document.getElementById("file-upload").click();
        } else {
          this.$message.error('商品sku不能为空');
          return;
        }
      },

      //关闭信息提示
      closeError: function () {
        this.errorShow = false;
      },

      //获取计量单位数据
      getMetering: function () {
        let vm = this;
        instance({
          method: 'get',
          url: '/v1/dict/goodsUnit',
        }).then(function (data) {
          console.log(data)
          if (data.data.success) {
            vm.meteringFirst = data.data.data;

          }
        })
      },

      choosePic: function (e) {
        let vm = this;
        let current_pic = e.target.files[0];
        let param = new FormData();
        console.log("current_pic", current_pic)
        param.append('file', current_pic, current_pic.name);
        param.append("key", vm.singleSKU.sku);
        param.append("type", "goods");
        console.log(param)
        axios({
          method: 'post',
          url: baseURL + '/v1/goods/uploadPic',
          data: param,
        }).then(function (data) {
          console.log(data)
          if (data.data.code == '9999') {
            vm.$router.push({
              path: '/login',
            });
            return
          }
          if (data.data.code == '0000') {
            vm.$router.push({
              path: '/401',
            });
            return
          }
          if (data.data.code == '1111') {
            vm.$router.push({
              path: '/401',
            });
            return
          }
          if (data.data.success) {
            console.log(data)
            vm.show = false;
            vm.singleSKU.goodsPic = data.data.data;
            console.log(data)
            vm.$message({
              message: '上传图片成功！',
              type: 'success'
            });
          }
        });
      },

      //定时信息提示
      setTime: function () {
        let vm = this;
        setTimeout(function () {
          vm.errorShow = false;
        }, 2500)
      },

      declareCodeRe: function () {
        if (this.singleSKU.declareCode.length > 14) {
          this.singleSKU.declareCode = this.singleSKU.declareCode.substr(0, 14);
        }
      },

      //删除图片
      deletePicComfirm: function () {
        let vm = this;
        vm.$confirm('此操作将删除此图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: ''
        }).then(() => {
          vm.deletePic();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },

      //删除图片
      deletePic: function () {
        $("#file-upload").val('');
        this.singleSKU.goodPic = '';
        this.show = true;
      },

      submit: function () {
        let vm = this;
        if (!vm.singleSKU.sku) {
          this.flag = false;
          vm.$message.error('商品sku不能为空');
          return;
        } else if(vm.singleSKU.sku.length > 20){
          this.flag = false;
          vm.$message.error('商品sku字段值应该小于21位，请确认');
          return;
        } else {
          this.flag = true;
        }

        if (!vm.singleSKU.goodsCn) {
          this.flag = false;
          vm.$message.error('中文名称不能为空');
          return;
        } else {
          this.flag = true;
        }

        if (!vm.singleSKU.goodsEn) {
          vm.$message.error('英文名称不能为空');
          return;
        } else {
          this.flag = true;
        }

        if (!vm.singleSKU.declareNameCn) {
          this.flag = false;
          vm.$message.error('申报品名(中文)不能为空');
          return;
        } else {
          this.flag = true;
        }

        if (!vm.singleSKU.declareNameEn) {
          this.flag = false;
          vm.$message.error('申报品名(英文)不能为空');
          return;
        } else {
          this.flag = true;
        }

        if (!vm.singleSKU.declareCode) {
          this.flag = false;
          vm.$message.error('申报编码不能为空');
          return;
        }else if (vm.singleSKU.declareCode.length != 10) {
            this.flag = false;
            vm.$message.error('申报编码字段值应该为10位，请确认');
            return;
        } else {
          this.flag = true;
        }
        if (!vm.singleSKU.gmodel) {
          this.flag = false;
          vm.singleSKU.gmodel = "";
          vm.$message.error('规格不能为空');
          return;
        } else {
          this.flag = true;
        }
        if (vm.singleSKU.recordNo && vm.singleSKU.recordNo.length != 18) {
          this.flag = false;
          vm.$message.error('海关商品备案编号字段值应该为18位，请确认');
          return;
        } else {
          this.flag = true;
        }
        if (vm.singleSKU.barCode && vm.singleSKU.barCode.length > 13) {
          this.flag = false;
          vm.$message.error('条形码字段值应该小于14位，请确认');
          return;
        } else {
          this.flag = true;
        }

        if (!vm.meteringFirstSelect) {
          this.flag = false;
          vm.$message.error('第一计量单位不能为空');
          return;
        }
        //去空格
        vm.singleSKU.sku = vm.singleSKU.sku.trim();
        vm.singleSKU.goodsCn = vm.singleSKU.goodsCn.trim();
        vm.singleSKU.goodsEn = vm.singleSKU.goodsEn.trim();

        vm.singleSKU.declareNameCn = vm.singleSKU.declareNameCn.trim();
        vm.singleSKU.declareNameEn = vm.singleSKU.declareNameEn.trim();
        vm.singleSKU.declareCode = vm.singleSKU.declareCode.trim();


       if(vm.singleSKU.gmodel){
          vm.singleSKU.gmodel = vm.singleSKU.gmodel.trim();
       }
        if(vm.singleSKU.recordNo){
          vm.singleSKU.recordNo = vm.singleSKU.recordNo.trim();
       }
         if(vm.singleSKU.barCode){
          vm.singleSKU.barCode = vm.singleSKU.barCode.trim();
       }

        //键盘已经禁用空格键
        // vm.singleSKU.length = vm.singleSKU.length.trim();
        // vm.singleSKU.wide = vm.singleSKU.wide.trim();
        // vm.singleSKU.height = vm.singleSKU.height.trim();
        // vm.singleSKU.recordNo = vm.singleSKU.recordNo.trim();
        // vm.singleSKU.weight = vm.singleSKU.weight.trim();


        if (this.flag) {
          if (vm.singleSKU.transportType == '') {
            vm.singleSKU.transportType = 0;
          }
          vm.singleSKU.unit = vm.meteringFirstSelect;
          vm.singleSKU.secondUnit = vm.meteringSecondSelect;
          console.log(vm.singleSKU)
          instance({
            method: "post",
            url: '/v1/goods/addOrEdit',
            data: vm.singleSKU
          }).then(function (data) {
            console.log(data)
            if (data.data.success) {
              vm.formVerifyBoolean.sku = false;
              vm.formVerify.skuError = "";
              vm.$router.push({
                path: '/product',
                name: '商品列表',
              })
            } else {
              vm.$message.error(data.data.msg);
            }
          })
        }
      },


      //获取所有商品分类树
      getAllCategory: function () {
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/goods/category/getAll',
        }).then(function (data) {
          if (data.data.success) {
            let menus = data.data.data;
            vm.allMenu = menus;
            console.log(vm.allMenu)
            vm.menuListCheck = [];
            vm.getData(null, menus);
            vm.depositMenus = [];
            for (let i = 0; i < vm.menuListCheck.length; i++) {
              if (vm.menuListCheck[i].categoryParentId == null) {
                vm.depositMenus.push(vm.menuListCheck[i])
              }
            }
            vm.allCategoryAnalysis = vm.depositMenus;
          }
        })
      },

      getData: function (id, arry) {
        let vm = this;
        var childArry = this.familyTree(id, arry);
        if (childArry.length > 0) {
          for (var i = 0; i < childArry.length; i++) {
            let obj = {};
            obj = childArry[i];
            childArry[i].children = this.familyTree(childArry[i].categoryId, arry);
            childArry[i].show = false;
            vm.menuListCheck.push(obj);
            vm.getData(childArry[i].categoryId, arry);
          }
        }
      },
      //
      familyTree: function (id, arry) {
        var newArry = new Array();
        for (var i in arry) {
          if (arry[i].categoryParentId == id)
            newArry.push(arry[i]);
        }
        return newArry;
      },


      //商品品牌下拉列表
      getProductBrand: function () {
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/goods/brand/getList',
          params: {}
        }).then((data) => {
          vm.brandSelectList = data.data.data;
        })
      },

      getMenuName: function (menus) {
        let vm = this;
        for (var value of menus) {
          if (value.categoryId == vm.singleSKU.categoryId) {
            vm.formData.inspectObjectName = value.categoryName;
          }
          if (value.children) {
            this.getMenuName(value.children)
          }
        }
      },

      //获取路由传参
     async   getItem() {
        let vm = this;
        let routerParams = this.$route.query.sku;
        let readonly = this.$route.query.readonly;


        if (readonly) {
          this.readonly = true
        }
        if (routerParams) {
          instance({
            method: "post",
            url: "/v1/goods/getList",
            params: {sku: routerParams}
          }).then(function (data) {
            console.log('/v1/goods/getList', data)
            if (data.data.success) {
              vm.singleData = data.data.data.list;
              vm.singleSKU.sku = vm.singleData[0].sku;
              vm.singleSKU.goodsCn = vm.singleData[0].goodsCn;
              vm.singleSKU.goodsEn = vm.singleData[0].goodsEn;

              vm.singleSKU.categoryId = vm.singleData[0].categoryId;
              vm.getMenuName(vm.allCategoryAnalysis);
              vm.singleSKU.brandId = vm.singleData[0].brandId;
              vm.singleSKU.goodsPic = vm.singleData[0].goodsPic;
              vm.singleSKU.retailPrice = vm.singleData[0].retailPrice;
              vm.singleSKU.declareNameCn = vm.singleData[0].declareNameCn;
              vm.singleSKU.declareNameEn = vm.singleData[0].declareNameEn;
              vm.singleSKU.declarePrice = vm.singleData[0].declarePrice;
              vm.singleSKU.declareWeight = vm.singleData[0].declareWeight;
              vm.singleSKU.declareCode = vm.singleData[0].declareCode;
              vm.singleSKU.transportType = vm.singleData[0].transportType == 0 ? '' : vm.singleData[0].transportType;
              vm.singleSKU.length = vm.singleData[0].length;
              vm.singleSKU.wide = vm.singleData[0].wide;
              vm.singleSKU.height = vm.singleData[0].height;
              vm.singleSKU.weight = vm.singleData[0].weight;
              vm.singleSKU.id = vm.singleData[0].id;
              vm.getMetering();
              vm.meteringFirstSelect = vm.singleData[0].unit;
              vm.meteringSecondSelect = vm.singleData[0].secondUnit;
              vm.show = false

              //v2
              if(vm.singleData[0].gmodel == null || vm.singleData[0].gmodel == undefined){
                  vm.singleSKU.gmodel = "";
              }else{
                 vm.singleSKU.gmodel  = vm.singleData[0].gmodel;
              }

              vm.singleSKU.recordNo = vm.singleData[0].recordNo;
              vm.singleSKU.barCode = vm.singleData[0].barCode;
              vm.mybrandName = vm.singleData[0].brandName;
               if( vm.singleData[0].transportType ==""){
                        vm.mytransportTypeName = "无"
               }else if( vm.singleData[0].transportType ==1){
                        vm.mytransportTypeName = "液体"
               }else if( vm.singleData[0].transportType ==2){
                        vm.mytransportTypeName = "粉末"
               }else if( vm.singleData[0].transportType ==3){
                        vm.mytransportTypeName = "带电"
               }
               vm.meteringFirst.forEach(function(i,v,a){
                  if( vm.meteringFirst[v].code ==vm.singleData[0].unit ){
                      vm.singleSKU.meteringFirstName = vm.meteringFirst[v].codeValue
                  }
                });
                vm.meteringFirst.forEach(function(i,v,a){
                  if( vm.meteringFirst[v].code ==vm.singleData[0].secondUnit ){
                      vm.singleSKU.meteringSecondName =  vm.meteringFirst[v].codeValue
                  }
                });
            }
          })
           vm.titleString = "编辑商品"
        } else {
          for (let key in vm.singleSKU) {
            vm.singleSKU[key] = ""
          }
          vm.titleString = "新增商品"
        }
      await getMetering()

      },
      //点击查看
      verifyInfo: function () {
        this.getItem()
      },
        //返回
      goBanck(){
        this.$router.push("/v1/goods/getList");
      }
    },

    created() {
      //获取商品分类下拉列表
      this.getAllCategory();

      this.getItem();

      //获取商品品牌下拉列表
      this.getProductBrand();

      //获取计量单位数据
      this.getMetering();

    },

    computed: {
      sku() {
        return this.singleSKU.sku;
      },
      goodsCn() {
        return this.singleSKU.goodsCn;
      },
      goodsEn() {
        return this.singleSKU.goodsEn;
      },
      retailPrice() {
        return this.singleSKU.retailPrice;
      },
      declareNameCn() {
        return this.singleSKU.declareNameCn;
      },
      declareNameEn() {
        return this.singleSKU.declareNameEn;
      },
      declareWeight() {
        return this.singleSKU.declareWeight;
      },
      declarePrice() {
        return this.singleSKU.declarePrice;
      },
      declareCode() {
        return this.singleSKU.declareCode;
      },
      length() {
        return this.singleSKU.length;
      },
      wide() {
        return this.singleSKU.wide;
      },
      height() {
        return this.singleSKU.height;
      },
      weight() {
        return this.singleSKU.weight
      },
    },
    watch: {
      allMenu: function (val) {
        let vm = this;
        console.log(val)
        if (val && vm.singleData[0]) {
          for (let i = 0; i < val.length; i++) {
            if (val[i].categoryId == vm.singleData[0].categoryId) {
              vm.formData.inspectObjectName = val[i].categoryName;
            }
          }
        }
      },
      sku: function () {
        this.singleSKU.sku = (this.singleSKU.sku).replace(/[^A-Za-z0-9\-\_\-]/g, '');
        if (this.singleSKU.sku.length > 51) {
          this.singleSKU.sku = this.singleSKU.sku.substr(0, 51)
        }
      },
      goodsCn: function () {
        // this.singleSKU.goodsCn = (this.singleSKU.goodsCn).replace(/[^\u4E00-\u9FA5]/g,'');
      },
      goodsEn: function () {
        this.singleSKU.goodsEn = (this.singleSKU.goodsEn).replace(/[^\a-\z\A-\Z0-9\-\.\.\*\&\^\%\$\￥\(\)\{\}\(\)\#\+\@\!\_\<\>\?\\\/\[\]\:\;\'\"\,\|\=\`\~\`\·\s]+$/g, '');
      },
      retailPrice: function () {
        this.singleSKU.retailPrice = (this.singleSKU.retailPrice).replace(/[^0-9\.]/g, '');
      },
      declareNameCn: function () {
        // this.singleSKU.declareNameCn = (this.singleSKU.declareNameCn).replace(/[^\u4E00-\u9FA5]/g,'');
      },
      declareNameEn: function () {
        this.singleSKU.declareNameEn = (this.singleSKU.declareNameEn).replace(/[^A-Za-z0-9\-\ \-\.]/g, '');
      },
      declareWeight: function () {
        this.singleSKU.declareWeight = (this.singleSKU.declareWeight).replace(/[^0-9\.\.]/g, '');
      },
      declarePrice: function () {
        this.singleSKU.declarePrice = this.singleSKU.declarePrice.replace(/[^0-9\.\.]/g, '');
      },
      declareCode: function () {
        this.singleSKU.declareCode = this.singleSKU.declareCode.replace(/[^a-zA-Z0-9]/g, '');
        if (this.singleSKU.declareCode.length > 14) {
          this.singleSKU.declareCode = this.singleSKU.declareCode.substr(0, 14)
        }
      },
      length: function () {
        this.singleSKU.length = this.singleSKU.length.replace(/[^0-9\.\.]/g, '');
      },
      wide: function () {
        this.singleSKU.wide = this.singleSKU.wide.replace(/[^0-9\.\.]/g, '');
      },
      height: function () {
        this.singleSKU.height = this.singleSKU.height.replace(/[^0-9\.\.]/g, '');
      },
      weight: function () {
        this.singleSKU.weight = this.singleSKU.weight.replace(/[^0-9\.]/g, '');
      }
    }
  }
</script>

<style lang="less" scoped>
.el-collapse-item{
    border: 1px solid #ebeef5;
}

.el-collapse{
	border: none;
}

.el-main{
    background: #ecf0f5 !important;
    margin: 15px;
    .toptitle{
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        border-bottom: 1px solid #ebeef5;
        margin-bottom: 16px;
        position: relative;
        margin: 0 20px;
    }
}
.all-content{
  background:#FFFFFF;

}
label {
    margin-right:30px !important;
}
  .linehe input {
    height: 34px !important;
    line-height: 34px !important;
  }

  .el-select-dropdown__item {
    line-height: 24px !important;
    height: 24px !important;
  }

  .el-select-dropdown__item span {
    line-height: 24px !important;
  }

  .objectTree {
    position: absolute !important;
    overflow: auto;
    z-index: 100;
    width: 100%;
    height: 300px;
    border: 1px solid #cccdce;
    border-top: none;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #eeeeee;
    color: #555;
  }

  .treeSelect {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    background: rgba(255, 255, 255, 0);
  }
/* v2 */
.content{
   .option{
      background: #fff;
      margin-top:10px;
      padding: 0 20px 0;
      .module{
            display: flex;
            flex-wrap: wrap;
       .el-form-item{
          width: 32%;
        }

      }
      .base-info{
            display: flex;
            flex-wrap: wrap;
            .modelA{
              width: 32%;
              img{
                width:70%;
              }
            }
            .modelB{
              width: 66%;
               display: flex;
               flex-wrap: wrap;
              .el-form-item{
                width: 49%;
              }
            }
      }

      .divfloat{
         .el-form-item{
           width: 32%;
           float: left;
        }

      }
      &:first-child{
        margin-top: 0;
      }
      .title{
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        border-bottom: 1px solid #dddddd;
        margin-bottom: 16px;
        position: relative;
        &::before{
            content: "";
            display: inline;
            height: 30px;
            width: 2px;
            background-color: #409EFF;
            position: absolute;
            left: -20px;
            top: 10px;
        }
    }
  }
  .addProductCate{
       top: 3px;
      color: #409EFF;
      width: 120px;
      left: 520px;
  }
  .border-default{
      border: none;
      .upimgbut{
        background-color: #409EFF;
        width: 96px;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        color: #fff;
        padding: 0;
      }
      .uplaodImgTip{
        color: #C0C4CC;
        font-size: 14px;
      }
      .maxImg {
        border: 1px solid #E4E7ED;
        padding: 10px;
        position: relative;
        width: 500px;

        .delPic{
            position: absolute;
            right: -3px;
            top: 9px;
            width: 18px;
            height: 18px;
        }
        &.small{
          img{
            width:145px;
          }
        }

        img{
        width: 50%;
      }
      }
    }
    .input-group-addon{
        width: 70px;
        display: inline-block;
        position: absolute;
        left: 429px;
        line-height: 38px;
        margin-top: 1px;
        margin-right: 1px;
        border: none;
        padding: 0;
        background-color: #F5F7FA;
    }
    .selectDiv{
      width:100px;
      border:none;
      background: transparent;
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
      -webkit-tap-highlight-color: #fff;
    }
}
</style>
